<template>
  <div>
    <PageTitleSearch
      :title="title + currentRestName"
      :hotelList="hotelList"
      :currentHotel="currentHotel"
      v-model:lastMonth="lastMonth"
      :currentAcc="currentAcc"
      :isRestType="false"
      :currentRestType="currentRestType"
      :typeList="typeList"
      @hotel-change="handleSelectChange"
      @date-change="handleDateSelect"
      @acc-change="handleAccSelect"
      @type-change="handleTypeSelect"
    />
    <HotelMonthSingleDroom
      ref="droom"
      :hotel-list="hotelList"
      :current-hotel="currentHotel"
      :lastMonth="lastMonth"
      :current-acc="currentAcc"
      :current-rest-type="currentRestType"
    />
    <HotelMonthSingleMeal
      ref="meal"
      :hotel-list="hotelList"
      :current-hotel="currentHotel"
      :lastMonth="lastMonth"
      :current-acc="currentAcc"
      :current-rest-type="currentRestType"
    />
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { defHttp } from '/@/utils/http/axios';
  import HotelMonthSingleDroom from '@/views/applications/hotel/month/single/HotelMonthSingleDroom.vue';
  import HotelMonthSingleMeal from '@/views/applications/hotel/month/single/HotelMonthSingleMeal.vue';
  import PageTitleSearch from '@/views/applications/ui/PageTitleSearch.vue';
  import * as Constant from '/@/utils/Constant';

  export default {
    name: 'HotelMonthDroomMeal',

    components: {
      HotelMonthSingleDroom,
      HotelMonthSingleMeal,
      PageTitleSearch,
    },

    data() {
      return {
        title: '餐饮部分-',
        lastMonth: dayjs().subtract(1, 'month').format('YYYYMM'),
        hotelList: [],
        accList: [
          { label: '当月', value: 'month' },
          { label: '当年', value: 'year' },
        ],
        typeList: [
          { label: '全日餐厅', value: 'ad' },
          { label: '中餐厅', value: 'cn' },
          { label: '特色餐厅', value: 'sp' },
          { label: '宴会', value: 'ba' },
        ],
        currentHotel: {
          code: '',
          name: '',
        },
        currentAcc: 'month',
        currentRestType: 'ad',
        currentRestName: '全日餐厅',
      };
    },

    created() {
      const parts = this.$route.path.split('/');
      const lastPart = parts[parts.length - 1];
      this.currentRestType = lastPart;
      this.getCurrentRestName();
      defHttp.get({ url: '/data/hotel/list' }, { isTransformResponse: false }).then((res) => {
        if (res.success && res.result.length > 0) {
          const dataList = res.result;
          this.hotelList = dataList.map((s) => ({
            label: s.name,
            value: s.code,
          }));
          const currentHotelCode = this.$route.query.hotelCode || localStorage.getItem(Constant.STORAGE_HOTEL_NAME);
          if (currentHotelCode && dataList.filter((d) => d.code === currentHotelCode).length > 0) {
            this.currentHotel = dataList.filter((d) => d.code === currentHotelCode)[0];
          } else {
            this.currentHotel = {
              code: dataList[0].code,
              name: dataList[0].name,
            };
          }
        }
      });
    },

    methods: {
      getCurrentRestName() {
        const restaurant = this.typeList.find((item) => item.value === this.currentRestType);
        this.currentRestName = restaurant ? restaurant.label : '未知类型';
      },
      handleDateSelect(date) {
        this.lastMonth = date;
      },

      handleAccSelect(value) {
        this.currentAcc = value;
      },

      handleTypeSelect(value) {
        this.currentRestType = value;
      },

      handleSelectChange(value) {
        this.currentHotel = {
          code: value,
          name: this.hotelList.find((h) => h.value === value).label,
        };
        localStorage.setItem(Constant.STORAGE_HOTEL_NAME, this.currentHotel.code);
      },
    },
  };
</script>

<style lang="less" scoped>
  .main-content {
    padding: 12px 0;

    &-title {
      &-custom {
        color: #00b578;
      }
    }
  }

  .card-double {
    display: flex;
    justify-content: space-between;

    &-item {
      flex-basis: 48%;
    }
  }

  .card-point {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
  }
  .card-remark {
    font-size: 12px;
    text-align: right;
  }
  .card-title {
    margin-right: 90px;
  }

  .interval-area {
    margin-bottom: 12px;
  }

  .select-title-space {
    margin-right: 20px;
    width: 200px;
  }

  ::v-deep .select-title .van-cell {
    color: hsl(217, 16%, 60%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: unset;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background-color: #112c4d;
  }

  .popup-right {
    width: auto;

    &-content {
      height: 800px;
      width: 318px;

      &-oprate {
        display: flex;
        padding: 16px;
        justify-content: center;

        &-item {
          width: 100%;
          margin-right: 10px;
        }

        &-item:last-child {
          margin-right: 0;
        }
      }
    }
  }

  @media @desktop {
    .main-frame-desktop-header {
      padding: 1rem;
      background: #fff;
      overflow: hidden;
    }

    .echarts {
      width: 100%;
      height: 300px;
    }
    .flex-height {
      height: 489px;
    }
    .unline {
      text-decoration: underline;
    }
    .card-intitle {
      font-size: 14px;
      font-weight: 600;
      text-align: center;
    }
    .card-top {
      text-align: center;
      margin-bottom: 12px;
    }
    .card-flex {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
    .card-left {
      display: flex;
      justify-content: space-between;
      gap: 4px;
    }
    .card-img {
      padding: 12px;
      border-radius: 10px;
      background-color: #f7f5f4;
    }
    .dash-line {
      border-left: 1px dashed #d9d9d9;
    }
  }
</style>
